<template>
  <div class="box">
    <div id="skillLevelEacht" ref="skillLevelEacht" class="sl-eacht"></div>
    <div class="tot" :style="textLineOneStyle">
      <div :style="textLineOneStyle" class="line-one">{{ tot }}</div>
      <div :style="textLineTwoStyle"  class="line-two">
       总人数
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  props: {
    method:{
      type:Function
    },
    eachtData: {},
    retailFormatData: {},
    retailFormatEachrt: {},
    textLineOneStyle:{
      type:String,
      default:'color: #42c7de;font-size: 20px;font-weight: 600'
    },
    textLineTwoStyle:{
      type:String,
      default:'color: #fff;font-size: 14px;font-weight: 600;'
    },
    totStyle:{
      type:String,
      default:'width: 90px;top: 44px;left: 26px;'
    }
  },
  data() {
    return {
      tot: 0,
    };
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
  
    echartsInit() {
      let nameArr = [];
      let total = this.eachtData.reduce((pre, cur) => pre + cur.num, 0);
      this.eachtData.forEach((item, index) => {
        nameArr.push(item?.name);
      });
      let that = this;
      console.log(total, "total");
      console.log(this.eachtData, "aaa");
      let dataList = that.eachtData;
      that.tot = dataList.reduce((pre, cur) => pre + cur.num, 0);
      let myChart = this.$echarts.init(this.$refs.skillLevelEacht)
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: (val) => {
              
              return `<p style="max-width: 600px;overflow:hidden;white-space:pre-wrap;">${val.data.name}:${val.data.value}%</p>`;
            },
        },
        color: ["#CB455E", "#0158E9", "#D3B931", "#04C375", "#C36004","#4951FF","#42C7DE","#168D6F","#15ABFF"],
        legend: {
          top: 30,
          right: 20,
          itemGap:20,
          y:"center",
          orient: "vertical",
          data: nameArr,
          textStyle: {
            // 文字的样式
            fontSize: 2, // 可控制每个legend项的间距
            color: "#fff",
            textAlign: "left",
            rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
              one: {
                color: "#fff",
                fontSize: 12,
                width: 20,
                height: 10,
                fontWeight: 700,
              },
              two: {
                color: "#34EFFE",
                fontSize: 16,
                fontWeight: "bold",
                width: 36,
                // 上右下左
                padding: [0, 0, 0, 70],
              },
              three: {
                color: "#fff",
                fontSize: 14,
              },
              four: {
                color: "#fff",
                fontSize: 12,
                width: 40,
                height: 15,
                fontWeight: 700,
                // padding:[10,0,0,0]
              },
              five: {
                color: "#34EFFE",
                fontSize: 12,
                width: 40,
                height: 15,
                fontWeight: 700,
                // padding:[10,0,0,0]
              },
            },
          },
          formatter: (name) => {
            let num = 0;
            let radio = 0;
            for (var i = 0; i < that.eachtData.length; i++) {
              if (name == that.eachtData[i].name) {
                radio = that.eachtData[i].value;
                num = that.eachtData[i].num;
              }
            }
            return `{one|${name}}{two|${num}}{three|人}`;
            // {three|人}{four|占比\n}{five|${radio}%}
          },
          tooltip: {
            show: true, // 显示图例的tooltip
           
            textStyle: {
              width: 300, // 提示框宽度300
              overflow: "breakAll", // 文字太长时换行
            },
            formatter: (val) => {
              console.log(val,"val")
              
              return that.method('jndj-box',2,val.name);
            },
          }
          
        },
        series: [
          {
            name: "技能等级",
            // 饼图
            type: "pie",
            // 饼图的半径
            radius: ["55%", "80%"],
            center: ["26%", "48%"],
            itemStyle: {
             
              borderRadius: 2,
              borderType: [5, 10],
              borderWidth: 1,
              borderColor: "transparent",
              borderDashOffset: 5,
            },
            label: {
              show: false,
              position: "center",
            },
            data: this.eachtData,
          },
        ],
        // title: {
        //   text: total,
        //   left: "20%",
        //   top: "40%",
        //   textStyle: {
        //     color: "#34EFFE",
        //     fontSize: 22,
        //     align: "center",
        //   },
        // },
        // graphic: {
        //   type: "text",
        //   left: "21%",
        //   top: "55%",
        //   style: {
        //     text: "总人数",
        //     textAlign: "center",
        //     fill: "#fff", //文字的颜色
        //     width: 30,
        //     height: 30,
        //     fontSize: 16,
        //     // fontFamily: "Microsoft YaHei",
        //   },
        // },
      });
    
      myChart.off("legendselectchanged");
      myChart.on("legendselectchanged", function (obj) {
        // console.log(obj,'0bj=======================');
        // let selected = obj.selected;
        // let name = obj.name;
        let selectArr = [];
        for (const key in obj.selected) {
          if (obj.selected[key]) {
            selectArr.push(key);
          }
        }
        let result = 0;
        selectArr.forEach((k) => {
          dataList.forEach((cur) => {
            if (k === cur.name) {
              result += cur.num;
            }
          });
        });
        that.tot = result;
        // console.log(tot,'=========222======');
        // myChart.setOption(option,true);
      });
 
      myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 每个legend的index
        // console.log(legendDataIndex,'=====================');
        that.$emit("retailerIntro", legendDataIndex);
       
      });
      myChart.getZr().on("mouseout", (event) => {
        that.$emit("retailerIntroHide");
        that.method(false);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sl-eacht {
  width: 100%;
  height: 100%;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  .tot {
    position: absolute;
    width: 90px;
    top: 44px;
    left: 26px;
    text-align: center;
  }
}
.rf-eacht {
  width: 100%;
  height: 100%;
}
.line-one {
  // color: #42c7de;
  // font-size: 20px;
  // font-weight: 600;
}
.line-two {
  // color: #fff;
  // font-size: 14px;
  // font-weight: 600;
}
</style>
